<template>
  <div>
    <VForm
      ref="formRef"
      :model="model"
      :fieldList="fieldList"
      :options="formOption"
      :originOption="options"
    >
      <template #channel_code_append>%</template>
      <template #logistics_login_url="{ value, input }">
        <div class="flex relative">
          <el-input
            class="l-input"
            :modelValue="value"
            @update:modelValue="input"
            placeholder="物流商登录地址"
          />
          <el-button
            type="primary"
            class="absolute right-[10px] top-[5px] bottom-[5px] !h-[auto]"
          >
            跳转
          </el-button>
        </div>
      </template>
      <template #delivery_time="{ input, value }">
        <DeliverTime @input="input" :value="value" />
      </template>
      <template #max="{ input, value }">
        <Max @input="input" :value="value" />
      </template>
    </VForm>
  </div>
</template>
<script setup lang="jsx">
import VForm from '@/components/Form/index.vue'

import DeliverTime from './components/DeliveryTime/index.vue'
import Max from './components/Max/index.vue'

const model = ref({})
const formRef = ref()

const props = defineProps({
  options: { type: Object, default: () => ({}) },
  data: { type: Object, default: () => ({}) },
})

watch(
  () => props.data,
  val => {
    const {
      is_out_stock,
      is_verify_far,
      is_verify_zip_code,
      return_process,
      logistics_login_url,
      effective_days,
      delivery_time,
      weight_range,
      uni_max_height,
      uni_max_length,
      uni_max_width,
      custom_max_perimeter,
    } = val || {}
    model.value = {
      is_out_stock,
      is_verify_far,
      is_verify_zip_code,
      return_process,
      logistics_login_url,
      effective_days,
      delivery_time: { delivery_time, delivery_time_radio: !!delivery_time },
      weight_range,
      max: {
        uni_max_height,
        uni_max_length,
        uni_max_width,
        custom_max_perimeter,
      },
    }
  }
)

const fieldList = [
  {
    field: 'is_out_stock',
    label: '缺货预报',
    type: 'radio',
    originField: 'is_out_stock',
    tooltip: `用于缺货订单也会同步到物流，是否支持提前获取跟踪单号`,
  },
  { type: 'br' },
  {
    field: 'is_verify_far',
    label: '是否验证偏远',
    type: 'radio',
    originField: 'is_verify_far',
    tooltip: `设置后会去偏远地址库找偏远地区/国家，找到就计算费用`,
    full: true,
    style: { width: '100%' },
  },
  { type: 'br' },
  {
    field: 'is_verify_zip_code',
    label: '地址验证/邮编验证(API)',
    type: 'radio',
    originField: 'is_verify_zip_code',
    tooltip: `客户订单邮编跟物流商邮编库进行比对验证是否有效`,
    full: true,
  },
  { type: 'br' },
  {
    field: 'return_process',
    label: '退件处理',
    type: 'radio',
    originField: 'return_process',
  },
  { type: 'br' },
  {
    field: 'logistics_login_url',
    label: '物流商登录地址',
    slot: 'logistics_login_url',
  },
  {
    field: 'effective_days',
    label: '跟踪号有效天数',
    type: 'inputNumber',
    style: 'width: 200px;',
    itemProps: {
      min: 0,
      max: 999999,
    },
  },
  { type: 'br' },
  { field: 'delivery_time', label: '最迟返货时间预报', slot: 'delivery_time' },
  {
    field: 'weight_range',
    label: '小于渠道最大可发重量',
    append: 'g',
    default: `<div class="text-[12px] text-[#999] w-[430px] leading-[17px] ml-[8px]">限制不允许超过渠道最大发货重量设置的缓冲范围，例A渠道最大2000g，这里设置2g，那么实际参与运费计算的最大值为2000-2=1998</div>`,
  },
  { type: 'br' },
  // {
  //   field: 'todo',
  //   label: '渠道商交货仓库代码/名称',
  //   style: 'width: 378px',
  //   default: `<div class="text-[12px] text-[#999] w-[226px] leading-[17px] ml-[8px]">这是渠道商接口里面需要我们下单时提供的交货仓库代码，万邦必填</div>`,
  // },
  { type: 'br' },
  { field: 'max', label: '渠道单边可发最大包裹', slot: 'max' },
]

const formOption = {
  inline: true,
  labelPosition: 'top',
}

const submit = () => {
  return new Promise(async (resolve, reject) => {
    try {
      const formInfo = await formRef.value.submit()

      const { max = {}, delivery_time = {}, ...reset } = formInfo || {}
      resolve({
        ...max,
        ...delivery_time,
        ...reset,
      })
    } catch (e) {
      console.error(e)
      reject('additional')
    }
  })
}

defineExpose({
  submit,
})
</script>
<style lang="scss" scoped>
.l-input {
  :deep(.el-input__inner) {
    padding-right: 80px;
  }
}
</style>
